<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>精彩图集</title>
	<link rel="stylesheet" href="/css/computer/index.css">
    <link rel="stylesheet" href="/css/computer/atlas/atlasupdata.css">
	<!-- 重置默认样式 -->
	<link rel="stylesheet" href="/css/resetcss.css">
	<style>

	</style>
</head>

<body>
	<div class="container-box">
		<div class="sidebar-box-left">
			<div class="sidebar">
				<div class="sidebar-header">
					<a href="#" class="user" id="user-center">个人中心</a>
					<a href="#" class="user" id="user-login">登录/注册</a>
				</div>
				<nav class="sidebar-nav">
					<ul>
						<a class="homepage">
							<li>主页</li>
						</a><a href="" class="lifemoment">
							<li>生活瞬间</li>
						</a><a href="" class="tourlog">
							<li>旅行记录</li>
						</a><a href="" class="atlas">
							<li class="active">精彩图集</li>
						</a>
					</ul>
				</nav>
			</div>
		</div>
		<div class="sidebar-box-right">
			<header>
				<div class="header-content">
					<h1>记录生活中的美好时刻</h1>
					<p class="subtitle">珍藏每一份感动，分享每一段旅程</p>
					<a href="#" class="btn" id="submit-delete">删除图片</a>
                    <a href="#" class="btn" id="submit-show">查看图集</a>
				</div>
			</header>

			<div class="container">
                <h1 class="container-h1"><%= json.Atlasname %></h1>
                <div class="selected-count">已选择: <span id="count">0</span> 张图片</div>
                
                <div class="gallery" id="gallery">
                    <!-- 图片将通过JavaScript动态加载 -->
                </div>
                
                <!-- 图片预览模态框 -->
                <div id="previewModal" class="modal">
                    <span class="close">&times;</span>
                    <div class="modal-content">
                        <img id="previewImage" src="" alt="">
                    </div>
                </div>

			</div>

			<footer>
				<div class="footer-links">
					<a href="#">关于我们</a>
					<a href="#">联系方式</a>
					<a href="#">隐私政策</a>
					<a href="#">使用条款</a>
				</div>
				<p class="copyright">© 2023 美好时光记录 版权所有</p>
			</footer>
		</div>
	</div>
</body>





<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script src="/configfile/config.js"></script>
<script src="/script/token.js"></script>
<script type="module">

	//window.__ENV__   这样来读取env环境变量里面公开出来的变量

	//获取导航的a标签，并设置href
	const homepageElement = document.querySelector('.homepage'); // 返回第一个匹配的节点
	const lifemomentElement = document.querySelector('.lifemoment'); // 返回第一个匹配的节点
	const atlasElement = document.querySelector('.atlas'); // 返回第一个匹配的节点
	const userCenter = document.querySelector('#user-center');//获取个人中心DOM
	const userLogin = document.querySelector('#user-login');//获取登录注册DOM


    let server_ip = window.__ENV__.SERVER_IP;//服务器ip
	let home_ip = window.__ENV__.HOME_SERVER_IP;//首页ip
	homepageElement.href = home_ip;
	let life_ip = window.__ENV__.LIFEMOMENT_SERVER_IP;//生活瞬间
	lifemomentElement.href = life_ip;
	let atlas_ip = window.__ENV__.ATLAS_SERVER_IP;//图片集
	atlasElement.href = atlas_ip;
	let user_ip = window.__ENV__.USER_SERVER_IP;//用户
	userCenter.href = user_ip;
	userLogin.href = user_ip;

	//获取令牌
	let token = localStorage.getItem("token");

	//获取jwt令牌状态
	let jwtState = getJwtState(token);

	
    //判断个人中心和登录注册显示页面
	if(jwtState.success){
		userCenter.style.display = "block";
		userLogin.style.display = "none";
	}else{
		userCenter.style.display = "none";
		userLogin.style.display = "block";
	}


    //后端返回的数据
    let resultData = <%- JSON.stringify(json) %>;

    // 图片数据 - 实际项目中可以从API获取
    const images = [];
    resultData.Atlasimgs.forEach((img)=>{
        images.push({
            src:server_ip + "/" + img.imgurl,
            alt:img.imgname
        });
    });

    // 存储选中图片的alt值
    const selectedImages = [];
    
    // 获取DOM元素
    const gallery = document.getElementById('gallery');
    const previewModal = document.getElementById('previewModal');
    const previewImage = document.getElementById('previewImage');
    const closeBtn = document.querySelector('.close');
    const countElement = document.getElementById('count');
    
    // 渲染图片画廊
    function renderGallery() {
        gallery.innerHTML = '';
        
        images.forEach((image, index) => {
            const item = document.createElement('div');
            item.className = 'gallery-item';
            
            const img = document.createElement('img');
            img.src = image.src;
            img.alt = image.alt;
            
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.className = 'checkbox';
            checkbox.dataset.index = index;
            
            // 点击图片预览
            img.addEventListener('click', (e) => {
                // 阻止事件冒泡，避免触发checkbox点击
                e.stopPropagation();
                openModal(image.src, image.alt);
            });
            
            // 点击checkbox选择图片
            checkbox.addEventListener('click', (e) => {
                e.stopPropagation(); // 阻止事件冒泡
                
                const alt = image.alt;
                const isChecked = checkbox.checked;
                
                if (isChecked) {
                    // 如果checkbox被选中，添加alt到数组
                    if (!selectedImages.includes(alt)) {
                        selectedImages.push(alt);
                    }
                } else {
                    // 如果checkbox取消选中，从数组中移除
                    const index = selectedImages.indexOf(alt);
                    if (index > -1) {
                        selectedImages.splice(index, 1);
                    }
                }
                updateSelectedCount();
            });
            
            item.appendChild(img);
            item.appendChild(checkbox);
            gallery.appendChild(item);
        });
    }
    
    // 打开预览模态框
    function openModal(src, alt) {
        previewImage.src = src;
        previewImage.alt = alt;
        previewModal.style.display = 'flex';
    }
    
    // 关闭预览模态框
    function closeModal() {
        previewModal.style.display = 'none';
    }
    
    // 更新已选择图片数量显示
    function updateSelectedCount() {
        countElement.textContent = selectedImages.length;
    }
    
    // 事件监听
    closeBtn.addEventListener('click', closeModal);
    
    // 点击模态框背景关闭
    previewModal.addEventListener('click', (e) => {
        if (e.target === previewModal) {
            closeModal();
        }
    });
    
    // 初始化画廊
    renderGallery();

    //提交删除方法
    let submitDelete = document.getElementById("submit-delete");
    submitDelete.addEventListener("click", ()=>{
        if(selectedImages.length<=0){
            alert("请选择图片");
            return;
        }
        let deleteImgData = {
            Atlas_id: resultData.Atlas_id,
            Atlasimgs: selectedImages
        }
        axios
            .post(
                atlas_ip + "/deleteimg",
                deleteImgData,
                {
                    headers: {
                        "Authorization": `Bearer ${token}`
                    }
                }
            )
            .then((res) => {
                //判断后端的报错信息。如果存在则保存失败
                // console.log(res.data);
                if(res.data.message.success){
                    alert("删除成功");
                    location.reload();
                }
            })
            .catch(err => {
                console.log(err);
                alert("拒绝访问");
            });

    });

    //跳转查看图集方法
    (function (){
        let submitShow = document.getElementById("submit-show");
        //更新
        submitShow.addEventListener("click", ()=>{
            axios
                .post(
                    atlas_ip + "/gettempcode",
                    {},
                    {
                        headers: {
                            "Authorization": `Bearer ${token}`
                        }
                    }
                )
                .then((res) => {
                    //判断后端的报错信息。如果存在则保存失败
                    console.log(res.data);
                    let tempToken = res.data.tempToken;
                    //跳转新页面
                    let href = `${atlas_ip}/show${resultData.Atlas_id}`;
                    window.location.href = `${href}?tempToken=${tempToken}`;
                })
                .catch(err => {
                    console.log(err);
                    alert("拒绝访问");
                });
        });
    })();




</script>

</html>